<template>
  <div v-if="cinema" class="detail spage">
    <myhead :back="true" title=""></myhead>
    <div class="cinema-info">
         <h2 class="name">
            {{cinema.name}}
         </h2>
         <div class="services">
            <p v-for="(l,i) in cinema.services" :key="i" @click="show=true" class="item">
              <span> {{l.name }}</span>
            </p>
             <van-icon name="arrow" />
         </div>
         <div class="address">
            <van-icon name="location-o" size="58" />
            <p class="text van-ellipsis">{{cinema.address}}</p>
           <van-icon name="phone-o" size="58" />
         </div>
    </div>
    <div class="imgsbox" v-if="films[current]">
        <div class="swipe" >
            <img :src="films[current].poster" class="imgbg" alt="">
            <div class="myswipe">
                <my-swipe ref="swipe"  id="oneswipe" :options="options">
                    <my-swipe-item v-for="(l,i) in films" :key="i" >
                        <img :src="l.poster" class="mimg" alt="">
                    </my-swipe-item>
                </my-swipe>
            </div>
        </div>
        <div class="film" @click="gotofilm">
            <div class="left"  >
                <div class="titles">
                  <h3 class="name"> {{films[current].name}}</h3>
                  <p class="grade">{{films[current].grade}} 分</p>
                </div>
                <div class="infos van-ellipsis">
                    <span> {{films[current].category}}</span>
                    |
                    <span> {{films[current].runtime}} 分钟</span>
                    |
                    <span> {{films[current].director}} 分钟</span>
                    |
                    <span>
                      {{films[current].nation}}
                    </span>
                </div>
            </div>
            <van-icon class="right" name="arrow" size="48" ></van-icon>
        </div>
    </div>
    <div class="blist">
        <div class="bitem" v-for="(l,i) in schedules" :key="i">
            <div class="one">
                {{l.filmLanguage}} {{l.imagery}}
            </div>
            <div>
              ¥{{l.marketPrice}}元
            </div>
            <van-button type="danger">购票</van-button>
        </div>  
    </div>

    <van-popup v-model="show" closeable position="bottom" :style="{ height: '100%' }">
          <div class="pop">
              <div class="pop-top">
                  <span>{{cinema.name}}</span>
              </div>
              <div class="pop-list">
                  <div class="pop-item" v-for="(l,i) in cinema.services" :key="i" >
                      <p class="left-item">
                          <span> {{l.name }}</span>
                          <van-icon name="arrow" />
                      </p>
                      <p class="right-item">
                        {{l.description}}
                      </p>
                  </div>
              </div>
          </div>
      </van-popup>
  </div>
</template>


<script>
export default {
  name:"cinema-detail",
  data(){
    var that = this;
    return {
      cinema:null,
      show:false,
      films:[],
      current:0,
      schedules:[],
      date:this.$route.params.date  ? this.$route.params.date  : new Date().getTime() /1000,
      options:{
         observer:true,
          slideToClickedSlide:true,
          effect : 'coverflow',
          slidesPerView: 2.8,
          centeredSlides: true,
          spaceBetween : 40,
          coverflowEffect: {
              rotate: 5,
              stretch: 10,
              depth: 340,
              modifier: 2,
              slideShadows : false
          },
          on:{
            slideChange: function(){
              console.log('改变了，activeIndex为'+this.activeIndex);
              that.current = this.activeIndex;
            },
          }
      }
    } 
  },
  watch:{
    current(v){
      this.getlist({
          filmId:this.films[v].filmId,
          date:parseInt(this.date)
      })
    },
    date(v){
      this.getlist({
          filmId:this.films[this.current].filmId,
          date:parseInt(v)
      })
    }
  },
  methods:{
    gotofilm(){
      this.$router.push({name:'film',params:{
        filmId:this.films[this.current].filmId 
      }})
    },
    getlist({
      filmId,
      date,
    }){
      this.$ajax.getMaiZuo({
        cinemaId:this.$route.params.cinemaId,
        filmId,
        date,
      },{
        'X-Host': 'mall.film-ticket.schedule.list'
      })
      .then(res=>{
        console.log(res)
        this.schedules = res.data.schedules
      })
    }
  },
  mounted(){
    // 获取电影院信息
    this.$ajax.getMaiZuo({
      cinemaId:this.$route.params.cinemaId,
    },{
      'X-Host': 'mall.film-ticket.cinema.info'
    })
    .then(res=>{
      console.log(res)
      this.cinema = res.data.cinema;
    })

    // 这个电影院播放的电影
    this.$ajax.getMaiZuo({
      cinemaId:this.$route.params.cinemaId,
    },{
      'X-Host': 'mall.film-ticket.film.cinema-show-film'
    })
    .then(res=>{
      console.log(res)
      this.films = res.data.films;
      // var index = 0;
      if(this.$route.params.filmId){
        this.films.forEach((item,i)=>{
          if(item.filmId == this.$route.params.filmId){
            this.current = i;
          }
        })
        this.$nextTick(()=>{
            // this.$refs.swipe.slide(this.current,2000);  // 滑到某一页 
            setTimeout(()=>{
              this.$refs.swipe.myswiper.slideTo(this.current,2000);   // 异步

            },300)
        })
      }
      
      this.getlist({
          filmId:this.films[this.current].filmId,
          date:parseInt(this.date)
      })
    })
  }
}
</script>


<style lang="scss" scoped>
.pop{
  &-top{
    padding-top:30px;
    text-align: center;
    font-size:20px;
    color:#000;
    padding-bottom:10px;
  }
  .pop-list{
    display: flex;
    flex-direction: column;
    .pop-item{
      display: flex;
      margin-top:15px;
      align-items: center;
      .left-item{
        flex-shrink: 0;
        width:90px;
        text-align: right;
        padding: 0 6px;
        margin: 3px 2.5px;
        font-size: 12px;
        color: #ffb232;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          margin-right:4px;
          border:solid 1px #ffb232;
          padding:2px;
          display: block;
        }
      }
      .right-item{
        font-size:12px;
        color:#888;
        line-height: 16px;
      }
    }
  }

}
.swipe{
  width:100%;
  height:160px;
  padding:15px 0 ;  
  position: relative;
  .imgbg{
    width:100%;
    height:160px;
    overflow: hidden;
    -webkit-filter: blur(14px);   // 背景虚化 
    filter: blur(14px);
  }
  .myswipe{
    position: absolute;
    width:100%;
    height:100%;
    padding:20px 0;
    top:0;
    left:0;
    .mimg{
      width:90px;
      height:130px;
    }
  }

}
.film{
  margin-top:15px;
  padding:0 15px;
  display: flex;
  align-items: center;
  .left{
    // padding:0 15px;
    flex:1;
    flex-shrink: 0;
    .titles{
      display: flex;
      justify-content: center;
      align-items: center;
      .name{
        color:#444;
        font-size:16px;
      }
      .grade{
        color:#ffb232;
        margin-right:8px;
      }
    }
    .infos{
      width:320px;
      margin-top:10px;
      text-align: center;
    }
  }
  .right{
    color:#797d82;
    
  }
}
.cinema-info{
   padding:15px;
   .name{
      position: relative;
      text-align: center;
      font-size: 17px;
      color: #191a1b;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      padding: 0 15px;
      background: #fff;
      top: 0;
      height: 44px;
      line-height: 44px;
      z-index: 302;
   }
   .services{
     display: flex;
     color: #ffb232;
     justify-content: center;
     align-items: center;
     .item{
        text-align: center;
        padding: 0 6px;
        margin: 3px 2.5px;
        font-size: 12px;
        color: #ffb232;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          margin-right:4px;
          border:solid 1px #ffb232;
          padding:2px;
          display: block;
        }
     }
   }
   .address{
     display: flex;
     margin-top:15px;
     align-items: center;
     .text{
       font-size:14px;
       color:#333;
       padding:0 5px;
       width:290px;
     }
   }
}
</style>
